import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { ArrowRight, Building, Users, Handshake, BarChart4, ShoppingCart } from "lucide-react";

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* 英雄区域 */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-primary text-primary-foreground">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
              商会会员与企业产品展示平台
            </h1>
            <p className="max-w-[700px] text-lg md:text-xl">
              连接会员、展示产品、促进合作、共创商机
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button asChild size="lg">
                <Link href="/members">
                  浏览会员
                </Link>
              </Button>
              <Button asChild variant="outline" size="lg">
                <Link href="/products">
                  查看产品
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* 功能区域 */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-background">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                平台功能
              </h2>
              <p className="max-w-[700px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                我们提供全方位的服务，助力会员企业发展
              </p>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
            <Card>
              <CardHeader className="flex flex-row items-center gap-4">
                <Users className="h-8 w-8 text-primary" />
                <CardTitle>会员展示</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  展示商会会员信息，提升会员企业知名度和影响力
                </CardDescription>
              </CardContent>
              <CardFooter>
                <Button variant="ghost" size="sm" asChild className="gap-1">
                  <Link href="/members">
                    了解更多 <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
              </CardFooter>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center gap-4">
                <Building className="h-8 w-8 text-primary" />
                <CardTitle>企业产品</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  展示会员企业产品，扩大产品影响力，促进产品销售
                </CardDescription>
              </CardContent>
              <CardFooter>
                <Button variant="ghost" size="sm" asChild className="gap-1">
                  <Link href="/products">
                    了解更多 <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
              </CardFooter>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center gap-4">
                <Handshake className="h-8 w-8 text-primary" />
                <CardTitle>项目对接</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  提供项目对接服务，促进会员企业间合作，共创商机
                </CardDescription>
              </CardContent>
              <CardFooter>
                <Button variant="ghost" size="sm" asChild className="gap-1">
                  <Link href="/projects">
                    了解更多 <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
              </CardFooter>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center gap-4">
                <ShoppingCart className="h-8 w-8 text-primary" />
                <CardTitle>供需平台</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  发布和查看供需信息，满足会员企业多样化需求
                </CardDescription>
              </CardContent>
              <CardFooter>
                <Button variant="ghost" size="sm" asChild className="gap-1">
                  <Link href="/marketplace">
                    了解更多 <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* 数据统计 */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-muted">
        <div className="container px-4 md:px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div className="space-y-2">
              <h3 className="text-4xl font-bold">500+</h3>
              <p className="text-muted-foreground">会员企业</p>
            </div>
            <div className="space-y-2">
              <h3 className="text-4xl font-bold">2000+</h3>
              <p className="text-muted-foreground">产品展示</p>
            </div>
            <div className="space-y-2">
              <h3 className="text-4xl font-bold">300+</h3>
              <p className="text-muted-foreground">成功对接项目</p>
            </div>
            <div className="space-y-2">
              <h3 className="text-4xl font-bold">1500+</h3>
              <p className="text-muted-foreground">供需信息</p>
            </div>
          </div>
        </div>
      </section>

      {/* 联系我们 */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-background">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                联系我们
              </h2>
              <p className="max-w-[700px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                有任何问题或建议，请随时联系我们
              </p>
            </div>
            <div className="w-full max-w-sm space-y-2">
              <Button asChild className="w-full" size="lg">
                <Link href="tel:400-123-4567">
                  联系电话: 400-123-4567
                </Link>
              </Button>
              <Button asChild variant="outline" className="w-full" size="lg">
                <Link href="mailto:contact@chamber.com">
                  发送邮件
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}